<template>
  <div class="singer-song">
    <!-- 播放全部 -->
    <header>
      <div
        class="left"
        @click="$store.commit('addAllSongIntoPlaylist', { list: songs })"
      >
        <div class="icon icon_base"></div>
        <div class="text">播放全部</div>
        <div class="total" v-if="songs">
          {{ songs.length }}
        </div>
      </div>
    </header>
    <SongListItem v-for="item in songs" :key="item.id" :item="item" />
  </div>
</template>

<script>
import SongListItem from "@/components/basics/SongListItem.vue";

export default {
  components: {
    SongListItem,
  },
  name: "SingerSong",
  async created() {
    const { id } = this.$route.query;
    const res = await this.axios.get(`/artist/top/song?id=${id}`);

    this.songs = res.data.songs;
  },
  data() {
    return {
      songs: [],
    };
  },
};
</script>

<style lang="less" scoped>
.singer-song {
  padding: 10px;
  padding-top: 0;

  header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    position: sticky;
    top: 80px;
    z-index: 5;
    background-color: #fff;

    .left {
      width: 140px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .icon {
        width: 30px;
        height: 100%;
        background-image: url("../../../assets/kugou/播放.png");
        background-size: contain;
      }

      .text {
        font-weight: bold;
      }

      .total {
        color: #707070;
      }
    }
  }
}
</style>
